<script setup lang="ts">
import { ref } from 'vue'
const activityData = ref([
  {
    id: 1,
    img: 'https://images-cloud.qboson.com/miniProgram/ten-queen.png',
    title: '10皇后挑战得购物卡',
    desc: '2024.12.01 - 全部求解',
    btnText: '立即查看'
  },
  {
    id: 2,
    img: 'https://images-cloud.qboson.com/miniProgram/550-one.png',
    title: '每日抢550配额',
    desc: '每天09:00开抢',
    btnText: '立即参加'
  },
  {
    id: 3,
    img: 'https://images-cloud.qboson.com/miniProgram/550-two.png',
    title: '邀请好友得550配额',
    desc: '20xx.xx.xx - 2025.03.31',
    btnText: '立即参加'
  },
  {
    id: 4,
    img: 'https://images-cloud.qboson.com/miniProgram/550-three.png',
    title: '每周登录得550配额',
    desc: '2024.10.24 - 2025.01.24',
    btnText: '立即查看'
  },
  {
    id: 5,
    img: 'https://images-cloud.qboson.com/miniProgram/550-four.png',
    title: '登录获得1个550比特配额',
    desc: '2024.10.24 - 2025.01.24',
    btnText: '点击获取'
  }
])

const clickBtn = (id: number) => {
  switch (id) {
    case 1:
      uni.switchTab({
        url: `/pages/activity/index`
      })
    break;
    case 2:
      uni.navigateTo({
        url: `/pagesA/activity_550/grab_quotas`
      })
    break;
  
    default:
      break;
  }
}
</script>

<template>
  <view class="activity_new">
    <my-header navType="list"></my-header>
    <view class="container">
      <view class="card" v-for="(item, index) in activityData" :key="index">
        <view class="card_top">
          <image class="img" :src="item.img" />
        </view>
        <view class="card_bottom">
          <view class="left">
            <text class="title">
              {{ item.title }}
            </text>
            <text class="desc">
              {{ item.desc }}
            </text>
          </view>
          <view class="right" @click="clickBtn(item.id)">{{ item.btnText }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.activity_new{
  height: 100vh;
  overflow: auto;
  background: #F8F8F8;
  .container {
    .card {
      width: 90%;
      border-radius: 12px;
      background: #fff;
      margin: 16px auto;
      .card_top {
        height: 188px;
        .img {
          width: 100%;
          height: 100%;
          border-top-left-radius: 12px;
          border-top-right-radius: 12px;
        }
      }
      .card_bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 12px;
        .left {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          .title {
            font-size: 15px;
            font-weight: 500;
            line-height: 100%;
            color: rgba(0, 0, 0, 0.9);
          }
          .desc {
            font-size: 12px;
            line-height: 100%;
            color: rgba(0, 0, 0, 0.4);
            padding-top: 9px;
          }
        }
        .right {
          font-size: 13px;
          border-radius: 8px;
          align-items: center;
          padding: 11px 16px;
          gap: 10px;
          /* 主色 */
          background: #2A65FF;
          color: #fff;
        }
      }
    }
    .card:first-child {
      margin-top: 20px;
    }
  }
}
</style>
